<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>做题数据-评估报告</title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/zt-common.css"/>
		<link rel="stylesheet" type="text/css" href="./css/zt-pgbg.css"/>
	</head>
	<body>
		<%- include('./header.html')%>
		<div class="center-main">
			<%- include('./side.html')%>
			<div class="main">
				<div class="tit">
					<div class="tit-l">二级建造师 - 设备设施管理操作（一）</div>	
					<div class="tit-r">切换科目 <img src="img/zt_san.png" /></div>	
				</div>
				<div class="nav">
					<ul>
						<li class="on"><a href="javascript:;"><img src="img/zt_icon01_on.png"><span>评估报告</span></a></li>
						<li><a href="javascript:;"><img src="img/zt_icon02.png"><span>做题记录</span></a></li>
						<li><a href="javascript:;"><img src="img/zt_icon03.png"><span>错题集</span></a></li>
						<li><a href="javascript:;"><img src="img/zt_icon04.png"><span>试题收藏</span></a></li>
						<li><a href="javascript:;"><img src="img/zt_icon05.png"><span>做题笔记</span></a></li>
						<li><a href="javascript:;"><img src="img/zt_icon06.png"><span>排行榜</span></a></li>
					</ul>
				</div>	
				<div class="cnt">
					<h2 class="cnt-tit">我的刷题数据<a href="javascritp:;"><img src="img/zt_pgbg_icon01.png">数据分享</a></h2>
					<div class="stsj clearfix">
						<div class="stsj-item">
							<h2><b>24</b>%</h2>
							<p><img src="img/zt_pgbg_icon02.png">正确率</p>
						</div>
						<div class="stsj-item">
							<h2><b>24</b>道</h2>
							<p><img src="img/zt_pgbg_icon03.png">正确题数</p>
						</div>
						<div class="stsj-item">
							<h2><b>24</b>道</h2>
							<p><img src="img/zt_pgbg_icon04.png">错误题数</p>
						</div>
						<div class="stsj-item">
							<h2><b>214</b>道</h2>
							<p><img src="img/zt_pgbg_icon05.png">总题数</p>
						</div>
					</div>
				</div>
				<div class="cnt">
					<h2 class="cnt-tit">练习题量<span>（最近20天）</span></h2>
					<div id="chart" style="width: 100%; height: 240px;"></div>
				</div>
				<div class="cnt">
					<h2 class="cnt-tit">练习正确率趋势<span>（最近20次）</span></h2>
					<div id="chart2" style="width: 100%; height: 240px;"></div>
				</div>
			</div>	
		</div>
	<%- include('./footer.html')%>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript">	
		//练习题量
		var chart = echarts.init(document.getElementById('chart'));
		chart.setOption({
			grid:{
				left: 30,
				right: 20,
			},
			legend: {
				top: 0,
				right: 20,
				data:['最近20天做题量']
			},
			tooltip: {
				 trigger: 'axis',
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				show: true,
				
				data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20']
			},
			yAxis: {
				name: '(道)',
				type: 'value',
				splitLine: {
					show: true,
					lineStyle:{
					   color: ['#e6e6e6'],
					   width: 1,
					   type: 'dedash'
					}
				},
			},
			series: [{
				name:"最近20天做题量",
				data: [10,11,14,15,16,16,21,22,25,26,27,27,27,27,12,12,12,12,12,14],
				type: 'line',
				color: '#1966ff',
				areaStyle: {
					opacity: 0.2,
				}
			}]
		});
		
		//最近20次练习正确率趋势
		var chart2 = echarts.init(document.getElementById('chart2'));
		chart2.setOption({
			grid:{
				left: 30,
				right: 20
			},
			legend: {
				top: 0,
				right: 20,
				data:['最近20次练习正确率趋势']
			},
			tooltip: {
				 trigger: 'axis',
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20]
			},
			yAxis: {
				name: '(%)',
				type: 'value',
				splitLine: {
					show: true,
					lineStyle:{
					   color: ['#e6e6e6'],
					   width: 1,
					   type: 'dedash'
					}
				},
			},
			series: [{
				name:"最近20次练习正确率趋势",
				data: [10,20,30,40,50,10,20,30,40,50,10,20,30,40,50,10,20,30,40,50],
				type: 'line',
				color: '#f53930',
				areaStyle: {
					opacity: 0.2,
				}
			}]
		});

		
	</script>
	</body>
</html>
